<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="homework.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="header">
        <div class="container">
            <div class="logo"><a href=""></a></div>
            <div class="nav">
                <ul>
                    <li class="active"><a href="#">音乐馆</a></li>
                    <li><a href="#">我的音乐</a></li>
                    <li><a href="#">客户端</a></li>
                </ul>
            </div>
            <div class="search-container">
                <div class="search-box">
                    <input type="text" placeholder="搜索音乐、歌手、专辑">
                    <button type="submit"></button>
                </div>
            </div>
            <div class="user-actions">
                <ul>
                    <li><a href="#" class="login-btn">登录</a></li>
                    <li><a href="#" class="register-btn">注册</a></li>
                    <li><a href="#" class="settings-btn"><i class="icon-settings"></i></a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
        <div class="banner">
            <ul>
                <li class="active"><a href="#">最新音乐</a></li>
                <li><a href="#">热门音乐</a></li>
                <li><a href="#">新碟上架</a></li>
                <li><a href="#">新曲发布</a></li>
                <li><a href="#">DJ 舞曲</a></li>
                <li><a href="#">电音舞曲</a></li>
            </ul>
        </div>
        <div class="album-container">
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">阿云嘎</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000kxqtN0ddCpU_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">说得到做得到</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">胡海泉</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000001RNYYW0rHuPV_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">不在见</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">象乐队</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002R4DOj26Q61A_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">长安车马慢</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">优秀少年 (GOOD BOYS)</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000003jwWjV32HJIL_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">纸鸢</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">一条小团团ovo</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M0000005wEOc07Udwu_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">软肋</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">李宇春</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hB9KF0JcCBM_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">鸳鸯海棠</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">张晓涵</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000001aaIDw2ZOiW3_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">幻蝶</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">安沫英</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000dcpok0A8RP3_2.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">花好月圆</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">周迅</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000001YIxlA4gQCEn_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">九尾</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">戴荃</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002gMEz44d5sFf_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">记忆停留</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">蓝心羽</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000JYXBc1g7AxL_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">回声</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">那英</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000Ve7fh4Rt9ab_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">醒</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">Mikann耙耙柑</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000003vGHeb105WPr_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">姐姐妹妹站起来</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">马丽</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000003LyaIF13Qvfn_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">不是你的我的我</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">VOGUE 5</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M00000404rBw2zdaAR_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">怪我</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">崔子格</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000004ahwy74cpGbM_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">孤独者的旁白</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">王野</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000EEzCA3JIuRX_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">醉仙游</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">小魂</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
            <div class="album">
                <a href="#" class="cover-wrap">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002TAkS934JbdH_1.jpg"
                        class="cover-img">
                    <div class="cover-mask"></div>
                    <img src="imgs/cover_play.png" class="cover-play">
                </a>
                <div>
                    <a href="#" class="nowrap album-title">我要谢谢你</a>
                </div>
                <div>
                    <a href="#" class="nowrap album-author">余超颖</a>
                </div>
                <div class="nowrap album-time">2021-04-16</div>
            </div>
        </div>
    </div>

    <!-- 换页 -->
    <div class="page">
        <ul class="page-list">
            <li class="page-item active"><a href="#">1</a></li>
            <li class="page-item"><a href="#">2</a></li>
            <li class="page-item"><a href="#">3</a></li>
            <li class="page-item"><a href="#">4</a></li>
            <li class="page-item"><a href="#">5</a></li>
        </ul>
    </div>

    <div class="footer">
        <div class="footer-content">
            <div class="footer-left">
                <a href="#" class="footer-link">关于我们</a>
                <a href="#" class="footer-link">联系我们</a>
                <a href="#" class="footer-link">隐私政策</a>
                <a href="#" class="footer-link">条款与条件</a>
            </div>
            <div class="footer-right">
                <a href="#" class="footer-link">音乐版权</a>
                <a href="#" class="footer-link">广告服务</a>
                <a href="#" class="footer-link">法律声明</a>
            </div>
        </div>
    </div>

</body>

</html>